/* px 转化为rem */
@function rem($px){
	@return $px/108px * 1rem;
	//@return $px/64 rem;
}
*{
	margin:0;
	padding:0;
}
/* 头部 */
.header{
	width:100%;
	height:rem(120px);
	background:#f0f0f0;
	ul{
		height:rem(120px);
		li{
			float:left;
			width:33.33%;
			.title{
				width:rem(180px);
				height:rem(117px);
				margin:0 auto;
				text-align: center;
				line-height: rem(117px);
				font-size:rem(45px);
			}
			.artive{
				border-bottom: rem(3px) solid #50b337;
				color:#50b337;
			}
		}
	}
}
.wrap-jiesao{
	width:100%;
	height:rem(120px);
	.jiesao{
		width:50%;
		height:rem(120px);
		font-size:rem(45px);
		text-align: center;
		float:left;
		line-height: rem(120px);
		border-bottom: rem(1px) solid #f0f0f0;
	}
	.artive{color:#50b337;}
}
/* 商品详情 */
.container{
	width:100%;
	height:auto;
	.con-img{
		width:100%;
		height:rem(960px);
		img{
			width:100%;
			height:100%;
		}
	}
	.details-wrap{
		width:100%;
		height:rem(470px);
		border-top:rem(1px) solid #9a9a9a;
		border-bottom:rem(1px) solid #9a9a9a;
		.details{
			width:rem(1010px);
			height:rem(470px);
			margin:0 auto;
			.goodsName{
				width:rem(820px);
				height:rem(95px);
				display: -webkit-box; 
				-webkit-line-clamp: 2; 
				-webkit-box-orient: vertical; 
				overflow: hidden;
				font-size:rem(40px);
				line-height: rem(48px);
				margin-top:rem(50px);
			}
			.price{
				width:100%;
				margin-top:rem(65px);
				.price-one{
					color:#ff5702;
					font-size:rem(50px);
				}
				.price-two{
					color:#9b9b9b;
					font-size:rem(40px);
				}
				.price-three{
					float:right;
					color:#9b9b9b;
					font-size:rem(30px);
					line-height: rem(50px);
				}
				.price-four{
					color:#9b9b9b;
					font-size:rem(35px);
					margin-top:rem(50px);
					.four-s{
						text-decoration:line-through;
					}
				}
			}
			.commitment{
				width:100%;
				height:rem(107px);
				margin-top:rem(30px);
				li{
					float:left;
					width:33.33%;
					color:#686868;
					font-size:rem(30px);
					text-align: center;
					line-height: rem(95px);
					i{
						color:#ff702a;
						font-size:rem(32px);
					}
				}
			}
		}
	}
}
/* 限时抢 */
.wrap-timeLimit{
	width:100%;
	height:rem(110px);
	border-bottom: rem(1px) solid #9a9a9a;
	.timeLimit{
		width:rem(1000px);
		height:100%;
		margin:0 auto;
		line-height: rem(45px);
		display:flex;
		align-items:center;
		justify-content:space-between;
		.rob{
			width:rem(115px);
			height:rem(50px);
			border:rem(1px) solid #ff5704;
			color:#ff5704;
			font-size:rem(30px);
			text-align: center;
			border-radius:rem(10px);
		}
		.timekeeping{
			width:rem(760px);
			height:rem(50px);
			font-size:rem(35px);
			color:#8b8b8b;
		}
		i{
			float:right;
			font-size:rem(35px);
			color:#898989;
		}
	}
}
/* 评论 */
.content{
	width:100%;
	height:auto;
	background:#FFF;
	overflow:hidden;
	.pinlun-wrap{
		width:rem(1030px);
		background:#FFF;
		margin:0 auto;
		overflow:hidden;
		.tzhi{
			width:rem(1010px);
			border:rem(1px) solid #fd0002;
			border-radius:rem(10px);
			margin:0 auto;
			margin-top:rem(40px);
			color:#fd0002;
			font-size:rem(30px);
			letter-spacing:rem(2px);
			line-height: rem(35px);
		}
		.plun{
			width:rem(235px);
			height:rem(3px);
			margin:0 auto;
			background:#8e8e8e;
			margin-top:rem(60px);
			position:relative;
			.plun2{
				width:rem(130px);
				height:rem(46px);
				color:#8e8e8e;
				font-size:rem(30px);
				background:#FFF;
				position:absolute;
				top:rem(-20px);
				text-align: center;
				left:rem(50px);
				i{
					font-size:rem(45px);
					vertical-align:middle;
				}
			}
		}
		.goodsPlun{
			color:#515151;
			font-size:rem(40px);
			margin-top:rem(90px);
		}
		/* 用户评论 */
		.userPlun{
			width:100%;
			height:auto;
			margin-top:rem(35px);
			border-bottom: rem(1px) solid #9a9a9a;
			.userInfo{
				display:flex;
				align-items:center;
        flex-direction: row;
        justify-content: space-between;
        .user-wrap{
        	display: flex;
	        flex-direction: row;
	        align-items: center;
					.userImg{
						width:rem(75px);
						height:rem(75px);
						border-radius:50%;
						display:inline-block;
						img{
							width:100%;
							height:100%;
							border-radius:50%;
						}
					}
					.userName{
						color:#515151;
						font-size:rem(40px);
						margin-left:rem(20px);
					}
				}
				.plunTime{
					color:#9a9a9a;
					font-size:rem(35px);
				}
			}
			.plunText{
				margin-top:rem(35px);
				color:#696969;
				font-size:rem(40px);
				letter-spacing:rem(2px);
				line-height: rem(45px);
			}
			.plunStar{
				width:rem(300px);
				height:rem(40px);
				margin:rem(40px) 0;
				color:#f95a00;
				i{
					font-size:rem(40px);
				}
			}
		}
		.viewAll{
			width:100%;
			height:rem(280px);
			background:#FFF;
			overflow:hidden;
			.viewAll-box{
				width:rem(320px);
				height:rem(75px);
				border:rem(1px) solid #fb5a00;
				margin:0 auto;
				margin-top:rem(70px);
				color:#fb5a00;
				font-size:rem(40px);
				text-align: center;
				line-height: rem(75px);
				border-radius:rem(10px);
			}
		}
	}
}
/* 推荐 */
.recommend{
	width:100%;
	height:auto;
	background:#f2f2f2;
	.recommend-wrap{
		width:rem(1033px);
		height:rem(150px);
		margin:0 auto;
		overflow:hidden;
		.plun{
			width:rem(235px);
			height:rem(3px);
			margin:0 auto;
			background:#8e8e8e;
			margin-top:rem(70px);
			position:relative;
			.plun2{
				width:rem(130px);
				height:rem(46px);
				color:#8e8e8e;
				font-size:rem(30px);
				background:#f2f2f2;
				position:absolute;
				top:rem(-20px);
				text-align: center;
				left:rem(50px);
				i{
					font-size:rem(45px);
					vertical-align:middle;
				}
			}
		}
	}
	/* 推荐商品 */
	.wrap-center{
		width:rem(1033px);
		margin:0 auto;
		overflow:hidden;
		.list{
			float:left;
			width:rem(500px);
			height:rem(815px);
			background:#FFF;
			margin:rem(30px) rem(0px) rem(0px) rem(0px);
			border-radius:rem(10px);
			.list-img{
				width:rem(500px);
				height:rem(500px);
				img{
					width:100%;
					height:100%;
				}
			}
			.list-text{
				width:rem(460px);
				height:rem(315px);
				margin:0 auto;
				overflow:hidden;
				span{
					display: block;
					color:#515151;
					font-size:rem(45px);
					overflow:hidden;
					height:rem(46px);
					margin-top:rem(40px);
				}
				.explain{
					height:rem(70px);
					margin-top:rem(30px);
					font-size:rem(30px);
					display: -webkit-box; 
					-webkit-line-clamp: 2; 
					-webkit-box-orient: vertical; 
					overflow: hidden;
					line-height: rem(35px);
					color:#b6b6b6;
				}
				.text-price{
					margin-top:rem(65px);
					color:#fe5601;
					font-size: rem(40px);
					p{
						display:inline-block;
					}
					i{
						font-size:rem(33px);
						margin-left:rem(130px);
					}
				}
			}
		}
		li:nth-of-type(odd){
			margin-right:rem(33px);
		}
		li:last-child{
			margin-bottom: rem(30px);
		}
	}
}
/* 底部 */
.footer{
	width:100%;
	height:rem(145px);
	background:#FFF;
	ul{
		height:rem(145px);
		
		li{
			float:left;
			height:100%;
		}
		.footer-one{
			width:rem(445px);
			background:#FFF;
			.ico{
				width:33.33%;
				height:100%;
				i{
					color:#898989;
					font-size:rem(50px);
					display:block;
					text-align: center;
					margin:rem(20px) rem(0px) rem(15px) rem(0px);
				}
				span{
					color:#898989;
					font-size:rem(30px);
					display:block;
					text-align: center;
				}
			}
		}
		.footer-two{
			width:rem(320px);
			background:#febd00;
			color:#FFF;
			font-size:rem(40px);
			text-align:center;
			line-height: rem(145px);
		}
		.footer-three{
			width:rem(315px);
			background:#fe5600;
			color:#FFF;
			text-align: center;
			p{
				font-size: rem(35px);
				margin:rem(20px) rem(0px) rem(25px) rem(0px);
			}
			span{
				font-size:rem(40px);
			}
		}
	}
}